<template>
  <div class="recoment">
    <div class="recoment-title">热门歌单推荐:</div>
    <div class="recomentList">
      <div
        v-for="(item, index) in recomentData"
        :key="index"
        class="recomentList-con clearfix"
        @click="getRecomentPlaylistInfo(item.id)"
      >
        <div class="recomentList-con-left fl">
          <img
            class="auto-img"
            v-lazy="item.picUrl"
            :key="item.picUrl"
            alt=""
          />
          <!-- :src="item.picUrl" -->
        </div>
        <div class="recomentList-con-cent fl">
          <div class="cent-top-text">{{ item.name }}</div>
        </div>
        <div class="recomentList-con-trackCount fr">{{ item.trackCount }}</div>
      </div>
    </div>
    <div class="recomentRanking-con" id="recomentRanking-con" v-show="isShow">
      <div class="con-null">
        <div class="con-null-title">{{ recomentTitleName }}</div>
      </div>
      <div class="recomentRanking-con-box">
        <div class="contain-top">
          <div class="contain-play">
            <div class="play-lis">
              <el-tooltip
                class="item"
                effect="dark"
                content="播放全部"
                placement="top"
              >
                <img
                  src="../../assets/image/icon/allplay.png"
                  class="auto-img"
                  @click.stop="allPlay"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="全部加入播放列表"
                placement="top"
              >
                <img
                  src="../../assets/image/icon/allList.png"
                  class="auto-img"
                  @click.stop="JOinPlayList('all')"
                />
              </el-tooltip>
              
            </div>
          </div>
        </div>
        <div class="contain-list">
          <div
            class="contain-list-con"
            v-for="(item, index) in rankData"
            :key="item.id"
            @click="getURL(item.id)"
          >
            <div class="contain-list-nav clearfix">
              <div class="contain-index">
                <span>{{ index + 1 }}</span>
              </div>
              <div
                class="contain-list-con-left"
                :style="{ '--hoverTransform': setTransform(index + 1) }"
              >
                <img
                  class="auto-img"
                  v-lazy="rankData.length > 0 ? item.al.picUrl : ''"
                  :key="rankData.length > 0 ? item.al.picUrl : ''"
                  alt=""
                />
                <!-- <img
                  class="auto-img"
                  :src="rankData.length > 0 ? item.al.picUrl : ''"
                  alt=""
                /> -->
              </div>
              <div class="contain-list-con-cent">
                <div class="cent-top-name">
                  {{ rankData.length > 0 ? item.name : "" }}
                </div>
                <div
                  class="cent-top-text"
                  :style="`transform: translateX(${
                    2.7946 -
                    (index + 1 >= 10 && index + 1 < 100
                      ? 0.68716
                      : index + 1 >= 100 && index + 1 < 1000
                      ? 2 * 0.68716
                      : index + 1 >= 1000 && index + 1 < 10000
                      ? 3 * 0.68716
                      : 0)
                  }rem);`"
                >
                  {{ rankData.length > 0 ? item.ar[0].name : "" }}
                </div>
              </div>
              <div class="contain-list-con-trackCount">
                <div class="con-list-item item0" @click.stop="ClickLikeMusic(item.id)">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入喜欢列表"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/shoucang_1.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
                <div class="con-list-item item1">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入歌单"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/jiahao.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
                <div
                  class="con-list-item item2"
                  @click.stop="JOinPlayList(item.id)"
                >
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入播放列表"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/24gl-playlistMusic3.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
                <div
                  class="con-list-item item3"
                  @click.stop="downloadMusic(item.id, item.name)"
                >
                  <DownLoad ref="mychild" />
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="下载"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/xiazai.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DownLoad from "@/components/publicCompontents/DownLoad";
import {
  getRecomentListInfo,
  getMusicPlaylistInfo,
  getMusicDetailInfo,
  getURLInfo,
} from "@/Api/seachApi.js";

export default {
  name: "Recoment",
  components: {
    DownLoad,
  },
  data() {
    return {
      //   推荐歌单列表
      recomentData: [],
      // 榜单信息
      rankTextData: [],
      // 榜单歌曲展示列表
      rankData: [],
      // 歌单歌曲Id
      rankTrackIds: [],
      // 播放全部歌曲
      allplay: [],
      // 推荐歌单中选中后详情的名称
      recomentTitleName: "",

      // 显示推荐歌单详情列表
      isShow: false,
      // 设置hover图片动态移动
      hoverTransform: "-0.78716rem",
    };
  },
  computed: {
    // 获取audio标签
    getAudioElement() {
      return this.$store.state.musicState.audioElement;
    },
    // 音乐Id
    musicID() {
      return this.$store.state.musicState.musicID;
    },
  },
  created() {
    this.getRecomentList();
  },
  methods: {
      // 点击添加音乐为喜欢 默认true 、否则false (api有问题)
    ClickLikeMusic(uid) {
      this.$store
        .dispatch("PlayState/Set_UserLike", { uid, like: true })
        .then((res) => {
          if (res.code === 200) {
            Message.success("已添加到喜欢列表");
          } else {
            Message.error("添加喜欢列表失败");
          }
        })
        .catch((err) => {
          Message.error("添加喜欢列表失败");
        });
    },
    //设置hover图片动态移动
    setTransform(index) {
      if (index < 10) {
        return "-0.78716rem";
      }
      let hoverTransform =
        index >= 10 && index < 100
          ? -0.72716 * 2
          : index >= 100 && index < 1000
          ? -0.72716 * 3
          : index >= 1000 && index < 10000
          ? -0.71716 * 4
          : 0;
      return `${hoverTransform}rem`;
    },
    getRecomentList() {
      const loading = this.$loading({
        background: "rgba(0,0,0,0.6)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
      });
      getRecomentListInfo({ limit: 16 })
        .then((res) => {
          // console.log(res);
          setTimeout(() => {
            loading.close();
            this.recomentData = res.result;
          }, 300);
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    getRecomentPlaylistInfo(uid) {
      this.rankTextData = [];
      this.rankTrackIds = [];
      this.isShow = true;
      getMusicPlaylistInfo({ id: uid })
        .then((res) => {
          // console.log(res);
          this.recomentTitleName = res.playlist.name; // 推荐歌单中选中后详情的名称
          this.rankTextData = res.playlist;
          res.playlist.trackIds.map((v) => {
            this.rankTrackIds.push(v.id);
          });
          setTimeout(() => {
            this.getMusic();
          }, 300);
        })
        .catch((err) => {
          loading.close();
        });
    },
    // 获取歌曲详情列表信息
    getMusic() {
      const loading = this.$loading({
        background: "rgba(0,0,0,0.6)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
        target: "#recomentRanking-con", //局部加載效果
      });
      this.rankData = [];
      getMusicDetailInfo(this.rankTrackIds)
        .then((res) => {
          console.log(res);

          if (res.code == 200) {
            this.rankData = res.songs;
            loading.close();
          }
        })
        .catch((err) => {
          loading.close();
          // console.log(err);
        });
    },
    // 播放全部
    allPlay() {
      this.axios({
        method: "GET",
        url: "http://musicapi.leanapp.cn/song/detail?ids=" + this.rankTrackIds,
      })
        .then((res) => {
          // console.log(res);

          if (res.data.code == 200) {
            res.data.privileges.map((v) => {
              this.allplay.push(v.id);
            });
            // console.log(this.allplay)
          }
          this.$store.commit("musicState/musicPlayList", this.allplay);
          this.getURL(res.data.songs[0].id);
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 点击播放
    getURL(id) {
      if (this.musicID === id) {
        return;
      }
      this.$store.commit("musicState/isClickPlay", false);

      getURLInfo({ id })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.$store.commit("musicState/SetMusicID", id);
            this.$store.commit("musicState/SetMusicPlayListData", id);
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 加入播放列表
    JOinPlayList(uid) {
      // 加入播放列表
      if (uid == "all") {
        this.$store.commit(
          "musicState/SetMusicPlayListData",
          this.rankTrackIds
        );
      } else {
        this.$store.commit("musicState/SetMusicPlayListData", uid);
      }
      // console.log(this.$store.state.musicPlayList)
    },
    // 下载音乐
    downloadMusic(uid, MusicName) {
      this.$nextTick(() => {
        // console.log("列表", this.$refs.mychild);
        // debugger
        this.$refs.mychild[0].downLoad(uid, MusicName);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/public.scss";
.recoment {
  height: 100%;
  padding: 60px 30px 10px 30px;
  box-sizing: border-box;
  // overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;

  .recoment-title {
    font-size: 26px;
    font-weight: bold;
    position: absolute;
    top: 30px;
    color: rgba(255, 255, 255, 0.8);
  }

  .recomentList {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    padding-left: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }

    .recomentList-con {
      width: 100%;
      height: 160px;
      padding: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #fff;
      background-color: rgba(0, 0, 0, 0.1);
      position: relative;
      cursor: pointer;

      &:hover {
        // background-color: rgba(0, 0, 0, 0.8);

        .recomentList-con-left {
          transform: scale(1.2);
        }
        .recomentList-con-cent {
          transform: scale(0.9);
        }
        .recomentList-con-trackCount {
          transform: scale(1.1);
        }
      }
    }
    .recomentList-con-left {
      width: 120px;
      height: 120px;
      border-radius: 20px;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .recomentList-con-cent {
      margin-left: 26px;
      display: flex;
      flex-flow: column;
      .cent-top-text {
        width: 460px;
        max-width: 460px;
        min-width: 400px;
        height: 90px;
        font-size: 22px;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.6);
        text-align: left;
      }
    }
    .recomentList-con-trackCount {
      //   background-color: blue;
      width: 200px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: inline-block;
      text-align: right;
      font-size: 60px;
      font-weight: bold;
    }
  }

  .recomentRanking-con {
    flex: 4;
    width: 70%;
    min-width: 700px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 10px 10px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 30px;
    overflow: hidden;
    // position: absolute;
    // top: 5%;
    // left: -70%;
    // z-index: 100;

    .con-null {
      width: 100%;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      text-align: center;
      font-size: 24px;
      padding: 0 10px;
      margin-bottom: 10px;
      color: rgba(255, 255, 255, 0.8);
      // background-color: rgba(0, 0, 0, 0.6);
    }
    .recomentRanking-con-box {
      width: 100%;
      height: calc(100% - 50px);
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .contain-top {
    width: 100%;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.1);

    .contain-play {
      width: 100%;
      margin-top: 10px;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.2);

      .play-lis {
        width: 120px;
        height: 100%;
        float: right;

        img {
          width: 30px;
          height: 30px;
          margin-right: 5px;
          margin-top: 12px;
          display: inline-block;
          vertical-align: bottom;
        }
      }
    }
  }

  .contain-list {
    width: 100%;
    // height: 680px;
    height: calc(100% - 60px);

    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    overflow: hidden;
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }

    .contain-list-con {
      width: 100%;
      height: 130px;
      padding: 20px;
      box-sizing: border-box;

      background-color: rgba(255, 255, 255, 0.1);

      .contain-list-nav {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-bottom: 1px solid #fff;
        position: relative;

        display: flex;
      }

      &:hover {
        .contain-list-nav {
          border: none;
          background-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.6);
        }
        .contain-index {
          color: rgba(255, 255, 255, 0);
        }
        .contain-list-con-left {
          transition: all 0.3s;
          // transform: translateX(-70px);
          transform: translateX(var(--hoverTransform));
        }

        .cent-top-name {
          transition: all 0.3s;
          transform: translateX(-80px);
        }
        .cent-top-text {
          min-width: 240px;
          transition: all 0.3s;
          transform: translateX(-80px) !important;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行
        }
        .item0 {
          transition: all 0.4s;
          transform: translateY(0px);
        }
        .item1 {
          transition: all 0.5s;
          transform: translateY(0px);
        }
        .item2 {
          transition: all 0.6s;
          transform: translateY(0px);
        }
        .item3 {
          transition: all 0.6s;
          transform: translateY(0px);
        }
      }
    }
    .contain-index {
      // width: 60px;
      height: 100%;
      font-size: 80px;
      font-weight: 900;
      margin-right: 10px;
      color: rgba(255, 255, 255, 0.6);
      // position: relative;
      // background-color: rgba(0, 0, 0, 0.1);

      span {
        // position: absolute;
        // bottom: -26px;
        // left: calc(50% - 26px);
      }
    }
    .contain-list-con-left {
      width: 90px;
      min-width: 90px;
      height: 90px;
      border-radius: 20px;
      overflow: hidden;
      transition: all 0.3s;
      transform: translateX(0px);
      background-color: rgba(0, 0, 0, 0.3);
    }
    .contain-list-con-cent {
      margin-left: 26px;
      display: flex;
      flex-flow: column;
      text-align: left;
      width: 100%;
      // position: relative;

      .cent-top-name {
        width: 200px;
        font-size: 20px;
        margin-top: 10px;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.6);
        transition: all 0.3s;
        transform: translateX(0px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .cent-top-text {
        // position: absolute;
        // right: 0;
        // bottom: 0;
        width: 100px;
        max-width: 200px;
        min-width: 200px;
        font-size: 20px;
        margin-top: 10px;
        font-weight: bold;
        transition: all 0.3s;
        // transform: translateX(218px);
        text-align: right;
        color: rgba(255, 255, 255, 0.6);
      }
    }
    .contain-list-con-trackCount {
      position: absolute;
      right: 0;
      height: 100%;
      line-height: 130px;
      // float: right;
      margin-right: 10px;

      .con-list-item {
        display: inline-block;
        width: 30px;
        height: 30px;
        vertical-align: middle;
        margin-right: 10px;
        transition: all 0.3s;
        transform: translateY(50px);
        cursor: pointer;
        z-index: 100;
      }
    }
  }
}
</style>
